<template>
  <el-card class="centerBar">
    <div class="center">
      <!-- 左侧 -->
      <div class="leftArea">
        <div class="topAvatar">
          <!-- 头像 -->
          <el-avatar
            class="avatar"
            :src="female"
            shape="circle"
            :size="100"
          ></el-avatar>
          <span class="name">独奏</span>
          <span class="icon">icon</span>
          <div class="bottomAvatar">
            <div class="fans">
              <span>0</span>
              <span>关注</span>
            </div>
            <div class="fans">
              <span>0</span>
              <span>粉丝</span>
            </div>
          </div>
        </div>
        <!-- nav导航区 -->
        <div class="navArea">
          <div class="resource">
            <router-link to="/resource">资源动态</router-link>
          </div>
          <div class="navMain">
            <div class="item">
              <router-link to="/member">我的会员</router-link>
            </div>
            <div class="item">
              <router-link to="/wallet">我的钱包</router-link>
            </div>
            <div class="item">
              <router-link to="/discount">我的优惠券</router-link>
            </div>
            <div class="item">
              <router-link to="/order">我买的订单</router-link>
            </div>
            <div class="item" @click="changeIcon">
              <span> 我卖的</span>
              <span class="icon" v-if="isShowIcon == true">
                <el-icon><ArrowDown /></el-icon>
              </span>
              <span class="icon" v-else>
                <el-icon><ArrowRight /></el-icon>
              </span>
            </div>
            <!-- 我卖的点开的内容 -->
            <div :class="isShowIcon ? 'hideItem' : 'hide'">
              <a href="" class="itemDetail">订单管理</a>
              <a href="" class="itemDetail">商品管理</a>
              <a href="" class="itemDetail">客户管理</a>
              <a href="" class="itemDetail">代收款</a>
              <a href="" class="itemDetail">优惠管理</a>
              <a href="" class="itemDetail">评价管理</a>
              <a href="" class="itemDetail">保证金</a>
            </div>
            <div class="item" style="background-color: #fff">
              <router-link to="/information">我的资料</router-link>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧 -->
      <RouterView></RouterView>
    </div>
  </el-card>
</template>

<script lang="ts">
import female from "../../assets/09.jpg";
import { ArrowDown, ArrowRight } from "@element-plus/icons-vue";

export default {
  name: "login",
  data() {
    return {
      female: female,
    };
  },
  components: {
    ArrowDown,
    ArrowRight,
  },
};
</script>

<script setup lang="ts">
import { ref } from "vue";
// 显示隐藏 icon
const isShowIcon = ref(false);
// 点击切换icon
const changeIcon = () => {
  isShowIcon.value = !isShowIcon.value;
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  .centerBar {
    width: 100%;
    height: 100%;
    background-color: #f5f7f9;

    .center {
      width: 1200px;
      height: 875px;
      // height: 100%;
      background-color: #f5f7f9;
      margin: 0 auto;
      display: flex;

      .leftArea {
        width: 170px;
        height: 240px;
        background-color: #f5f7f9;
        .topAvatar {
          padding: 21px 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #fff;
          border-radius: 4px;
          margin-bottom: 10px;
          background-color: #ffffff;
        }
        .name {
          padding-top: 10px;
        }
        .bottomAvatar {
          width: 120px;
          display: flex;
          justify-content: space-between;
        }
        .fans {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        // 左侧nav区域
        .navArea {
          position: relative;
          .resource {
            width: 170px;
            height: 50px;
            margin-bottom: 10px;
            font-size: 14px;
            padding-left: 21px;
            box-sizing: border-box;
            background-color: #ffffff;
            cursor: pointer;
            line-height: 50px;
            &:hover {
              border-left: 4px solid #f93684;
            }
          }
          .navMain {
            width: 170px;
            height: 260px;
            font-size: 14px;
            color: #111;
            background-color: #ffffff;
            .item {
              display: block;
              width: 100%;
              height: 50px;
              font-size: 14px;
              color: #111;
              padding: 17px 21px;
              box-sizing: border-box;
              cursor: pointer;
              position: relative;
              display: block;
              text-decoration: none;
              &:hover {
                border-left: 4px solid #f93684;
              }
              .icon {
                padding-left: 50px;
              }
              &:last-of-type {
                margin-top: 10px;
              }
            }
            .hideItem {
              width: 170px;
              height: 285px;
              background-color: #f5f7f9;
              display: flex;
              flex-direction: column;
              transition: 0.2s all linear;
              .itemDetail {
                width: 170px;
                height: 40px;
                background-color: #fff;
                padding: 0 30px;
                box-sizing: border-box;
                line-height: 40px;
                &:hover {
                  color: #f93684;
                }
              }
            }
            .hide {
              position: absolute;
              z-index: -1;
              height: 0;
              transition: 0.3s all linear;
            }
          }
        }
      }
    }
  }
}
</style>
